<template>
	<u-popup :mask-close-able="false" border-radius="54" mode="center" width="550rpx" height="300rpx"  v-model="show">
		<view class="content-title" >{{title}}</view>
		<view class="content-text">{{tips}}</view>
		<view class="btn-div">
			<view class="btn-cancle" v-if="articleDetail" open-type="exit" target="miniProgram">取消</view>
			<view class="btn-cancle" v-else @click="this.$emit('cancle')">取消</view>
			<view class="line-xian"></view>
			<button  open-type="getPhoneNumber" class="content-button"  @getphonenumber="getPhoneNumber" >确定</button>
		</view>
	</u-popup>
</template>
<script>
	import api from "../untils/api.js"
	export default {
		props:{
			title:String,
			tips:String,
			show:Boolean,
			articleDetail:false
		},
		methods:{
			getPhoneNumber(e){
				console.log(e.detail.errMsg)
				if (e.detail.errMsg === "getPhoneNumber:fail user deny"){
					uni.showToast({
					  title: '拒绝授权将无法正常使用哦',
					  icon: 'none',
					  duration: 2000
					})
				}
				else {
				api.getPhoneNumber(JSON.stringify({encryptedData:e.detail.encryptedData,iv:e.detail.iv,key:"ZHQQ_SM"})).then((res)=>{
						console.log(res.data.body)
						uni.setStorageSync("phone",res.data.body)
						uni.showTabBar()
						this.$emit('cancle')
						this.$emit('getPhoneOk')
				})  
				}   
			  }
		}
	}
	
</script>

<style scoped>
	.btn-cancle{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.content-title{
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		color: #000000;
		font-weight: 500;
	}
	.content-text{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #a3a3a3;
	}
	 button::after { border: none; }
	.content-button{
	  width: 50%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #303133;
	  background-color:#FFFFFF;
	}
	.line-xian{
		width: 1rpx;
		height: 100%;
		background: #a3a3a3;
	}
</style>
